<template>
	<view class="merchant-device-bind-layout">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
			<template #top>
				<view class="merchant-device-bind-search">
					<xh-agent-search placeholder="请输入商户名称" v-model="keywords" tipText="只显示通过扩展二维码注册的商户" :showSort="false" @searchResult="searchResult"></xh-agent-search>
				</view>
			</template>
			<view class="merchant-device-bind-list">
				<view class="merchant-device-bind-list-cell" v-for="item in dataList" :key="item.merchantId">
					<image src="/static/operate/agent_photo.png" mode="aspectFit"></image>
					<view class="merchant-device-bind-list-cell-container">
						<text class="xh-lines-1">商户编号：{{item.merchantNo}}</text>
						<view class="merchant-device-bind-list-cell-name">
							<text class="xh-lines-1">商户名称：{{item.merchantName}}</text>
							<view class="merchant-device-bind-list-cell-btn" v-if="!item.deviceNo" @tap="showBindDevice(item)">绑定</view>
						</view>
						<text class="xh-lines-1">终端SN号：{{item.deviceNo}}</text>
						<text class="xh-lines-1 merchant-device-bind-list-cell-time">注册日期：{{item.registrationDate}}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { onLoad ,onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getRemoteRegisterMerchantList } from '@/common/api/api.js'
	const pagingRef = ref(null)
	const dataList = ref([])
	const keywords = ref('')
	// 绑定
	const showBindDevice = (item)=>{
		uni.navigateTo({
			url:`/pages/home/merchant-manager/merchant-device-bind/device-bind/device-bind?merchantNo=${item.merchantNo}`
		})
	}
	// 搜索结果回调
	const searchResult = ()=>{
		pagingRef.value.reload()
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		params.merName = keywords.value
		const res = await getRemoteRegisterMerchantList(params, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
	onLoad(()=>{
		uni.$on('reloadDeviceBindList',()=>{
			pagingRef.value.reload()
		})
	})
	onUnload(()=>{
		uni.$off('reloadDeviceBindList')
	})
</script>

<style lang="scss" scoped>
.merchant-device-bind-layout{
	.merchant-device-bind-search{
		padding: 30rpx 30rpx 0;
	}
	.merchant-device-bind-list{
		padding: 0 30rpx 30rpx;
		.merchant-device-bind-list-cell{
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			image{
				width: 96rpx;
				height: 96rpx;
				flex-shrink: 0;
			}
			.merchant-device-bind-list-cell-container{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				font-size: 26rpx;
				flex: 1;
				.merchant-device-bind-list-cell-name{
					display: flex;
					align-items: center;
					margin: 10rpx 0;
					.merchant-device-bind-list-cell-btn{
						background-color: $xh-theme-color;
						color: #fff;
						text-align: center;
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						flex-shrink: 0;
						margin-left: auto;
					}
				}
				.merchant-device-bind-list-cell-time{
					margin-top: 16rpx;
				}
			}
		}
		
	}
	
}
</style>
